{% extends "main_template.html" %}

{% block extra-head %}
	<link rel="stylesheet" href="/site_media/js/plugins/chosen/chosen.min.css">
{% endblock %}

{% block content %}
	<p>Welcome, {{ name }}. Thanks for logging in.</p>
	<form class="form-horizontal" action="." method="post" id="form_profile">{% csrf_token %}
	{{form}}
		<table id="questions" class="table table-bordered">	
		{% for question_answer in question_answers %}
		<tr>
			<td width="300">
				{{question_answer.q.text}}?
			</td>
			<td>
				<select name="profile_{{question_answer.q.id}}" id="chzn_profile_{{question_answer.q.id}}" data-placeholder="Choose your profile" class="autogenerated_question">
					{% if question_answer.u_qa %}
						<option value="" selected="selected">No answer</option>
					{% else %}
						<option value="">No answer</option>
					{% endif %}
					
					{% for qa in question_answer.qa %}
						{% if qa.id == question_answer.u_qa.id %}
							<option value="{{qa.id}}" selected="selected">{{qa.text}}</option>
						{% else %}
							<option value="{{qa.id}}">{{qa.text}}</option>
						{% endif %}
					{% endfor %}
				</select>
				<input type="hidden" name="chzn_profile_selection_{{question_answer.q.id}}" id="chzn_profile_selection" value="" />
			</td>
		</tr>
		{% endfor %}
			<tr>
				<td width="300"> Which of these areas below do you have an interest of study ?  </td>
				<td>
					<select name="classifications_interest" id="classifications_interest" data-placeholder="Choose some Classifications" multiple>
						<option value=""></option>
					{% for classification in classifications %}
						{% if classification.id not in user_classifications_interests %}
							<option value="{{classification.id}}">{{ classification.name }}</option>
						{% else %}
							<option value="{{classification.id}}" selected="selected">{{ classification.name }}</option>
						{% endif %}
					{% endfor %}
					</select>
					<input type="hidden" name="chzn_interest_selection" id="chzn_interest_selection" value="" />
				</td>
			</tr>
			
			<tr>
				<td width="300"> Which of these areas below do you have knowledge ?</td>
				<td>
					<select name="classifications_knowledge" id="classifications_knowledge" data-placeholder="Choose some Classifications" multiple>
						<option value=""></option> 
					{% for classification in classifications %}
						{% if classification.id not in user_classification_proeficiencies %}
							<option value="{{classification.id}}">{{ classification.name }}</option>
						{% else %}
							<option value="{{classification.id}}" selected="selected">{{ classification.name }}</option>
						{% endif %}
					{% endfor %}
					</select>
					<input type="hidden" name="chzn_knowledge_selection" id="chzn_knowledge_selection" value="" />
				</td>
			</tr>
			<tr>
				<td width="300"> What programming languages do you know ?</td>
				<td>
					<select name="programming_languages" id="programming_languages" data-placeholder="Choose some Languages" multiple>
						<option value=""></option> 
					{% for pl in programming_languages %}
						{% if pl.id not in user_programming_languages_proeficiencies %}
								<option value="{{pl.id}}">{{ pl.name }}</option>
							{% else %}
								<option value="{{pl.id}}" selected="selected">{{ pl.name }}</option>
							{% endif %}
					{% endfor %}
					</select>
					<input type="hidden" name="chzn_programming_language_selection" id="chzn_programming_language_selection" value="" />
				</td>
			</tr>
		</table>
		<input type="submit" value="Save" />
	</form>
	<script src="/site_media/js/plugins/chosen/chosen.jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var cfg = {width: '100%'};
			
			$("#programming_languages").chosen(cfg);
			$("#classifications_knowledge").chosen(cfg);
			$("#classifications_interest").chosen(cfg);
			$(".autogenerated_question").chosen({allow_single_deselect:true});
			
			$('#form_profile').bind('submit', function(e){
				self = $(this);
				var data = self.serialize() + '&ajax-request=1';
				
				var completeHandler = function(data, status, jqXHR) {
					bootbox.alert("Profile saved!");
				};
				
				$.post(self.attr('action'), data).done(completeHandler);
				
				e.preventDefault();
				return false;
			});
			/*
			var serialize = function(selector) {
				var str = [];
				
				$(selector).children('option:selected').each(function(){
					str.push(this.value);
				});
				
				return str.join(',');
			};
			
			$('#form_profile').bind('submit', function(e) {
				$('#chzn_programming_language_selection').val(serialize("#chzn_programming_language"));
				$('#chzn_knowledge_selection').val(serialize("#chzn_knowledge"));
				$('#chzn_interest_selection').val(serialize("#chzn_interest"));
				$('#chzn_profile_selection').val(serialize("#chzn_profile"));
			});
			*/
		});
	</script>
{% endblock %}